<template>
	<div class="configListContent">
		<el-form ref="form" :model="configForm" :rules="rules">
			<el-row v-if="configList.length > 0">
				<div class="configItemButton">
					<template v-if="hasPermission('90150036')">
						<template v-if="!isEdit">
							<el-button
								type="primary"
								size="small"
								:disabled="configLoading"
								@click="handleEdit"
							>
								编辑
							</el-button>
						</template>
						<template v-else>
							<el-button
								type="plain"
								size="small"
								:disabled="configLoading"
								@click="handleCancel()"
							>
								取消
							</el-button>
							<el-button
								type="primary"
								size="small"
								:disabled="configLoading"
								@click="submitForm()"
							>
								保存
							</el-button>
						</template>
					</template>
					<el-button
						v-if="hasPermission('90750073')"
						type="warning"
						icon="el-icon-download"
						size="small"
						:loading="exportBtnLoading"
						:disabled="configLoading"
						@click="exportExcel"
					>
						{{ $t('dxn.card_ables_list.export_excel') }}
					</el-button>
				</div>
			</el-row>
			<div
				class="configItemContain"
				v-loading="configLoading"
				element-loading-spinner="el-icon-loading"
			>
				<el-row :gutter="1" class="configItemRow">
					<div
						v-for="(item, index) in configList"
						:key="index"
						class="configItemContent"
					>
						<div class="configTitle">
							{{ item.oddsType + 1 }}人Allin赔率
						</div>
						<el-table
							border
							size="mini"
							class="small-size-table"
							:data="item.oddsData"
							header-align="center"
							:header-cell-style="getHeaderRowStyle"
							:cell-style="getRowCellStyle"
						>
							<el-table-column
								label="OUTS"
								prop="outs"
								align="center"
							>
								<template slot-scope="scope">
									{{ scope.row.outs
									}}{{
										scope.row.gameType === 2001 &&
										scope.row.outs === 20
											? '+'
											: ''
									}}{{
										scope.row.gameType === 2002 &&
										scope.row.outs === 16
											? '+'
											: ''
									}}
								</template>
							</el-table-column>

							<el-table-column
								label="赔率"
								prop="odds"
								align="center"
							>
								<template slot-scope="scope">
									<el-input
										v-if="isEdit"
										v-model="configForm[scope.row.key]"
										style="width: 70px"
										:name="scope.row.key"
										v-input="{ name: 'float', num: '2' }"
										@input="onInputCheck(scope.row.key)"
									></el-input>
									<template v-else>
										{{ configForm[scope.row.key] }}
									</template>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-row>
				<div v-if="tips" class="showConfigTips">
					<i class="el-icon-warning icon-warning"></i>
					{{ tips }}
				</div>
			</div>
		</el-form>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		gameType: {
			type: Number,
			default: 0
		},
		configListForm: {
			type: Object,
			default: () => {}
		},
		configList: {
			type: Array,
			default: () => {}
		},
		configLoading: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			min: 0,
			max: 100,
			loading: false,
			isEdit: false,
			configForm: {},
			ruleMessage: '',
			exportBtnLoading: false
		}
	},
	computed: {
		rules() {
			return {}
		},
		tips() {
			if (this.configList.length === 0 && this.configLoading === false) {
				return '未获取保险赔率数据'
			}
			return ''
		}
	},
	watch: {
		configListForm: {
			handler(val) {
				this.configForm = Object.assign({}, val)
			},
			immediate: true
		}
	},
	mounted() {},
	methods: {
		exportExcel() {
			const params = { gameType: this.gameType }
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'exportInsureLossRatioConfig',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		},
		onInputCheck(formKey) {
			this.ruleMessage = ''
			if (this.configForm[formKey] === '') {
				this.ruleMessage = '保险赔率配置不能为空'
				this.$message.closeAll()
				this.$message.warning(this.ruleMessage)
				return
			}
			const val = Number(this.configForm[formKey])
			const pattern = /^\d+(\.\d{1,2})?$/
			const message = '只能输入数字，范围[0-100]，支持两位小数'
			let isShowMessage = false
			if (!pattern.test(val)) {
				if (isNaN(val)) {
					this.configForm[formKey] = this.configListForm[formKey]
				} else {
					this.configForm[formKey] = Number(this.filterSummar(val))
				}
				isShowMessage = true
			}
			if (val >= this.max || val < this.min) {
				this.configForm[formKey] = this.configListForm[formKey]
				isShowMessage = true
			}
			if (isShowMessage) {
				this.$message.closeAll()
				this.$message.warning(message)
			}
		},
		handleEdit() {
			this.isEdit = true
			this.ruleMessage = ''
		},
		handleCancel() {
			this.isEdit = false
			this.$message.info(this.$t('dxn.card_ables_list.canceled'))
			this.$emit('getConfigForm')
		},
		submitForm() {
			this.$refs.form.validate((valid) => {
				if (this.ruleMessage) {
					this.$message.warning(this.ruleMessage)
					return
				}
				if (valid) {
					const params = []
					Object.keys(this.configForm).forEach((item) => {
						const oldVal = parseFloat(this.configListForm[item])
						const val = parseFloat(this.configForm[item])
						if (oldVal !== val) {
							const itemArr = item.split('-')
							const id = parseInt(itemArr[1])
							const oddsType = parseInt(itemArr[2])
							const outs = parseInt(itemArr[3])
							const gameType = parseInt(itemArr[4])
							const row = {
								id: id,
								oddsType: oddsType,
								outs: outs,
								gameType: gameType,
								odds: val
							}
							params.push(row)
						}
					})
					if (params.length > 0) {
						this.$emit('submit', { updateList: params }, (flag) => {
							if (flag === true) {
								this.isEdit = false
							}
						})
					} else {
						this.isEdit = false
						this.$message.warning('未做修改')
					}
				}
			})
		},
		getHeaderRowStyle({ row, column, rowIndex, columnIndex }) {
			let style = 'border-color: #d7d7d7;'
			if (rowIndex === 0) {
				style += 'background-color: #f2f2f2;'
			}
			return style
		},
		getRowCellStyle({ row, column, rowIndex, columnIndex }) {
			let style = 'border-color: #d7d7d7;'
			if (columnIndex === 0) {
				style += 'background-color: #f2f2f2;'
			}
			return style
		}
	}
}
</script>

<style lang="scss" scoped>
.configListContent {
	margin-left: 10px;
	.configItemContain {
		overflow-x: auto;
		min-height: 150px;
		.configItemRow {
			width: 1440px;
		}
	}
	.configItemContent {
		margin-right: 10px;
		display: inline-block;
		vertical-align: top;
		width: 165px;
		.configTitle {
			margin-bottom: 10px;
		}
	}
	.configItemButton {
		width: 500px;
		float: left;
		margin-bottom: 10px;
	}
	.showConfigTips {
		color: red;
		font-size: 15px;
		line-height: 18px;
		text-align: center;
	}
}
</style>
